@import "tailwindcss";
@plugin "@tailwindcss/typography";
@config "../../tailwind.config.js";

html,
body {
  margin: 0;
  width: 100%;
  font-family: var(--font-inter);
  background-color: hsla(var(--background), 1);
  color: hsla(var(--foreground), 1);
}

:root {
  --background: 0, 0%, 100%;
  --foreground: 222.2, 47.4%, 11.2%;

  --muted: 210, 40%, 96.1%;
  --muted-foreground: 215.4, 16.3%, 46.9%;

  --popover: 0, 0%, 100%;
  --popover-foreground: 222.2, 47.4%, 11.2%;

  --border: 214.3, 31.8%, 91.4%;
  --input: 214.3, 31.8%, 91.4%;

  --card: 0, 0%, 100%;
  --card-foreground: 222.2, 47.4%, 11.2%;

  --primary: 16, 100%, 50%;
  --primary-foreground: 0, 0%, 100%;

  --secondary: 16, 75%, 87.5%;
  --secondary-foreground: 222.2, 47.4%, 11.2%;

  --accent: 16, 66.7%, 92.1%;
  --accent-foreground: 222.2, 47.4%, 11.2%;

  --destructive: 0, 100%, 50%;
  --destructive-foreground: 210, 40%, 98%;

  --ring: 215, 20.2%, 65.1%;

  --radius: 0.5rem;
}

.dark {
  --background: 20, 14.3%, 4.1%;
  --foreground: 213, 31%, 91%;

  --muted: 223, 47%, 11%;
  --muted-foreground: 215.4, 16.3%, 56.9%;

  --accent: 16, 66.7%, 12.5%;
  --accent-foreground: 213, 31%, 91%;

  --popover: 20, 14.3%, 4.1%;
  --popover-foreground: 215, 20.2%, 65.1%;

  --border: 216, 34%, 17%;
  --input: 216, 34%, 17%;

  --card: 20, 14.3%, 4.1%;
  --card-foreground: 213, 31%, 91%;

  --primary: 16, 100%, 50%;
  --primary-foreground: 0, 0%, 100%;

  --secondary: 16, 75%, 20%;
  --secondary-foreground: 213, 31%, 91%;

  --destructive: 0, 63%, 31%;
  --destructive-foreground: 210, 40%, 98%;

  --ring: 216, 34%, 17%;

  --radius: 0.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-rajdhani);
}

.disable-css-transitions * {
  transition: none !important;
}

.font-inter {
  font-family: var(--font-inter);
}

.font-rajdhani {
  font-family: var(--font-rajdhani);
}
